import tableColEdit from "../component/tableColEdit";
import {Util} from "@lowcode/jpaas-common-lib"
export default {
    methods:{
        createdElementTable(data){
            let { col , row , color , isTitle ,odd,even} = data;
            let _td = `<td></td>`;
            let _tdNew = `` ;
            for (let i = 0;i<col;i++){
                _tdNew += _td ;
            }
            let _trNew =`` ;
            let _tr = `<tr>${_tdNew}</tr>`
            for (let r = 0;r<row;r++){
                _trNew += _tr ;
            }
            let _colOdd = `<col width="${odd}%"/>`
            let _colEven = `<col width="${even}%"/>`;
            let _colNew = `` ;
            for (let n = 1 ;n < col + 1 ;n++){
                if(n % 2 == 0){
                    _colNew += _colEven ;
                }else {
                    _colNew += _colOdd ;
                }
            }
            let _colgroup = odd ? `<colgroup>${_colNew}</colgroup>`:``;
            let _class = 'rx-edit-table rx-table-'+color;
            let _element = isTitle ? `<caption><br/></caption><tbody>${_trNew}</tbody>` :`${_trNew}`;
            let _tabel = `<table class="${_class}">
                    ${_colgroup}
                    ${_element}
            </table>`
            return _tabel ;
        },
        addCustomButton(editorId) {//编辑器自定义头部按钮；
            let _self = this;
            let btnArray = [
                {
                    btnClassName: 'rx-table-button',
                    title: _self.$ti18('list.name','表格模板','tableCol'),
                    cssRules: '',
                    click: function(_editor) {
                        let config = {
                            component:tableColEdit,
                            curVm:_self,
                            widthHeight:['600px','400px'],
                            title:_self.$ti18('list.title','表格配置','tableCol')
                        }
                        Util.open(config,function (action,data){
                            if(action == 'ok'){
                                let elm = _self.createdElementTable(data);
                                //添加表格同时添加表格样式
                                elm+="<div>\n" +
                                    "    <style>\n" +
                                    ".rx-edit-table{width:100%;table-layout:fixed;border-collapse:collapse}.rx-edit-table td{border:1px solid #ddd;}.rx-edit-table th{border:1px solid #ddd;background-color:#F7F7F7}.rx-table-blue tr td:nth-child(2n+1),.rx-table-blue tr td:nth-last-child(2):first-child,.rx-table-blue tr td:nth-last-child(4):first-child,.rx-table-blue tr td:nth-last-child(2):nth-child(3),.rx-table-blue tr td:nth-last-child(6):first-child,.rx-table-blue tr td:nth-last-child(4):nth-child(3),.rx-table-blue tr td:nth-last-child(2):nth-child(5),.rx-table-blue tr td:nth-last-child(8):first-child,.rx-table-blue tr td:nth-last-child(6):nth-child(3),.rx-table-blue tr td:nth-last-child(4):nth-child(5),.rx-table-blue tr td:nth-last-child(2):nth-child(7),.rx-table-blue caption{background-color:#e3f1ff;}.rx-table-green tr td:nth-child(2n+1),.rx-table-green tr td:nth-last-child(2):first-child,.rx-table-green tr td:nth-last-child(4):first-child,.rx-table-green tr td:nth-last-child(2):nth-child(3),.rx-table-green tr td:nth-last-child(6):first-child,.rx-table-green tr td:nth-last-child(4):nth-child(3),.rx-table-green tr td:nth-last-child(2):nth-child(5),.rx-table-green tr td:nth-last-child(8):first-child,.rx-table-green tr td:nth-last-child(6):nth-child(3),.rx-table-green tr td:nth-last-child(4):nth-child(5),.rx-table-green tr td:nth-last-child(2):nth-child(7),.rx-table-green caption{background-color:#defaea;}.rx-table-grey tr td:nth-child(2n+1),.rx-table-grey tr td:nth-last-child(2):first-child,.rx-table-grey tr td:nth-last-child(4):first-child,.rx-table-grey tr td:nth-last-child(2):nth-child(3),.rx-table-grey tr td:nth-last-child(6):first-child,.rx-table-grey tr td:nth-last-child(4):nth-child(3),.rx-table-grey tr td:nth-last-child(2):nth-child(5),.rx-table-grey tr td:nth-last-child(8):first-child,.rx-table-grey tr td:nth-last-child(6):nth-child(3),.rx-table-grey tr td:nth-last-child(4):nth-child(5),.rx-table-grey tr td:nth-last-child(2):nth-child(7),.rx-table-grey caption{background-color:#ebeef5;}</style>\n" +
                                    "</div>"
                                _editor.execCommand('inserthtml', elm);
                            }
                        })
                    },
                }
            ];
            this.addBtn(editorId, btnArray)
        },
        addBtn(editorId, btnArray) {
            let arr = btnArray;
            for(let i = 0; i < arr.length; i++) {
                let btnItme = arr[i];
                window.UE.registerUI(btnItme.btnClassName, function(editor, uiName) {
                    // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
                    editor.registerCommand(uiName, {
                        execCommand: function() {
                            //  editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`)
                        }
                    })
                    let _editor = editor;
                    // 创建一个 button
                    let btn = new window.UE.ui.Button({
                        // 按钮的名字
                        name: uiName,
                        // 提示
                        title: btnItme.title,
                        // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
                        cssRules: btnItme.cssRules,
                        // 点击时执行的命令
                        onclick: function() {
                            // 这里可以不用执行命令，做你自己的操作也可;
                            return btnItme.click(_editor);
                        }
                    })

                    // 当点到编辑内容上时，按钮要做的状态反射
                    editor.addListener('selectionchange', function() {
                        var state = editor.queryCommandState(uiName)
                        if(state === -1) {
                            btn.setDisabled(true)
                            btn.setChecked(false)
                        } else {
                            btn.setDisabled(false)
                            btn.setChecked(state)
                        }
                    })

                    // 因为你是添加 button，所以需要返回这个 button
                    return btn
                }, i + 38 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */ , editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */ )
            }
        }
    }
}